<template>
  <GridView :gridJson="gridJson">
    <!-- 查询列表扩展 -->
    <template #query> </template>
    <!-- 操作列表扩展 -->
    <template #column="scope"></template>
    <!-- 数据处理扩展,存在时替换默认处理逻辑,插入对应字段名称的插槽即可替换默认内容渲染 -->
    <template #字段名称="{ scope, field }"> </template>
    <!-- 操作列表扩展 -->
    <template #operate="{ scope }">
      <el-button size="small" @click="setGrid(scope.row)">配置</el-button></template
    >
    <!-- 编辑页面扩展任意属性 -->
    <template #EDIT_ADD_FIELD="{ modal }">
      <el-form-item label="前端api" :prop="modal.api">
        <el-select
            v-model="modal.api"
            allow-create
            filterable
            default-first-option
            placeholder="Select"
            size="small"
            style="width: 160px"
        >
          <el-option v-for="(item, index) in apiNames" :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="编辑前端api" :prop="modal.editApi">
        <el-select
            v-model="modal.editApi"
            allow-create
            filterable
            default-first-option
            placeholder="Select"
            size="small"
            style="width: 160px"
        >
          <el-option v-for="(item, index) in apiNames" :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item>
    </template>
    <!-- 添加页面扩展任意属性 -->
    <template #ADD_ADD_FIELD="{ modal }">
      <el-form-item label="前端api" :prop="modal.api">
        <el-select
            v-model="modal.api"
            allow-create
            filterable
            default-first-option
            placeholder="Select"
            size="small"
            style="width: 160px"
        >
          <el-option v-for="(item, index) in apiNames" :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="编辑前端api" :prop="modal.editApi">
        <el-select
            v-model="modal.editApi"
            allow-create
            filterable
            default-first-option
            placeholder="Select"
            size="small"
            style="width: 160px"
        >
          <el-option v-for="(item, index) in apiNames" :key="index" :label="item" :value="item" />
        </el-select> </el-form-item
      ></template>
  </GridView>
</template>
<script setup>
import GridView from '../grid/json/preview/GridView.vue'
// 单页面网格模版
import { ref, inject, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import { usePageTabStore } from '@/stores/pageTab'
// const queryData = reactive({ data: { extend: {} }, page: { pageNum: 1, pageSize: 20 } })
const router = useRoute()
const api = inject('api')
const apiNames = Object.keys(api).filter((item) => typeof api[item] === 'function')
const gridJson = ref(null)
const store = usePageTabStore()

onBeforeMount(() => {
  api
      .getApi('FaSysGrid', router.meta.grids[0])
      .getCurrentJson()
      .then((data) => {
        gridJson.value = data
      })
})
function setGrid(data) {
  store.add('网格设置-' + data.name, '/home/grid/' + data.id)
}
</script>
<style scoped></style>
